<%@ page import="es.onlysolutions.gs.web.controller.VideoController" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN\" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="arq" uri="/tld/arquitectura.tld" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="display" uri="http://displaytag.sf.net/el" %>
<%@ taglib prefix="dynamic" uri="/tld/dynamic.tld" %>

<html>
<head>
<jsp:include page="Head.jsp"/>

    <!--Round the menu tabs-->
    <script type="text/javascript">
            window.onload = function()
            {
                Nifty("ul#nav a", "small transparent top");
                document.getElementById('queryString').focus();
                checkBrowser();
            }
    </script>
    
    <script type="text/javascript" xml:space="preserve">

        function showVideo( youTubeId )
        {
            document.location = 'video.htm?<%=VideoController.REQUEST_YOUTUBE_ID_PARAM%>=' + youTubeId;
        }

    </script>

</head>
<body id="page">

<c:set var="currentPage" value="myYouTube" scope="request" />
<jsp:include page="Menu.jsp"/>
<div>
    <form:form action="searchVideo.htm" method="post">
        &nbsp;<img src="images/powered_by_yt.gif" alt="Powered by YouTube" width="50" height="28" />
        <br>
        &nbsp;<form:input path="queryString"  />
        <input type="submit" name="btnYT" value="Search"/>
    </form:form>
</div>
<br>

<table width="100%" align="center">
    <c:forEach items="${command.videos}" var="video" varStatus="videoStatus">
        <tr class="headerTr">
            <td class="cellHeader" align="center" width="30%">
                <c:out value="${video.title}" />
            </td>
            <td  class="cellHeader" align="center" width="70%">&nbsp;</td>
        </tr>
        <tr>
            <td align="center">
                <img src="<c:out value="${video.urlImage}" />" height="97" width="130"
                     alt="Preview" class="videoImage" onclick="showVideo('<c:out value="${video.youTubeId}" />')" />
            </td>
            <td class="cell">
                <c:out value="${video.description}" />
            </td>
        </tr>
    </c:forEach>
</table>

</body>
</html>